<template>
  <!-- <div class="">
    <ele-pro-table
      ref="tableRef"
      style="width: 100%"
      :datasource="datasource"
      :pagination="false"
      :columns="columns"
      :toolbar="false"
    >
      <template #action>
        <el-link underline="never">审核</el-link>
      </template>
    </ele-pro-table>
  </div> -->
  <ele-split-panel
    flex-table
    size="280px"
    allow-collapse
    :custom-style="{ borderWidth: '0 1px 0 0', padding: '5px 0' }"
    :body-style="{ padding: '16px 16px 0 0', overflow: 'hidden' }"
    :style="{ height: '100%', overflow: 'visible' }"
  >
    <ele-loading
      :loading="loading"
      :style="{ flex: 1, paddingRight: '16px', overflow: 'auto' }"
    >
      <el-tree
        ref="treeRef"
        :data="treeData"
        highlight-current
        node-key="id"
        :props="{ label: 'order_sn' }"
        :expand-on-click-node="false"
        :default-expand-all="true"
        :filter-node-method="filterNode"
        :style="{
          '--ele-tree-item-height': '40px',
          '--ele-tree-expand-padding': 0,
          '--ele-tree-expand-margin': 0,
        }"
        @node-click="onNodeClick"
      >
        <template #default="{ data: d }">
          <div class="el-tree-node__label flex-ba w-full">
            <div style="margin-right: 4px">{{ d.order_sn }}</div>
            <el-tag size="small" :type="getType(d.status, { YS: 'danger' })">{{ d.status_name }}</el-tag>
          </div>
        </template>
      </el-tree>
    </ele-loading>
    <template #body>
      <template v-if="current">
        <el-descriptions title="验收单详情" :column="3">
          <template v-if="current.is_sh === 1" #extra>
            <el-button type="primary" :loading="loading" @click="showReview = true">审核</el-button>
          </template>
          <el-descriptions-item :width="100" label="验货编号">
            {{ current.order_sn || '-' }}
          </el-descriptions-item>

          <el-descriptions-item :width="100" label="状态">
            <el-tag size="small" :type="getType(current.status, { YS: 'danger' })">{{ current.status_name }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item :width="100" label="创建时间">
            {{ current.create_time ? formatDate(current.create_time) : '-' }}
          </el-descriptions-item>
          <el-descriptions-item :width="100" label="通知收货数量">
            {{ current.notice_num || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :width="100" label="待验收数量">
            {{ current.review_num || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :width="100" label="入库数量">
            {{ current.enter_num || '-' }}
          </el-descriptions-item>

          <el-descriptions-item :width="100" :span="2" label="备注">
            {{ current.remark || '-' }}
          </el-descriptions-item>
        </el-descriptions>
        <el-table
          :data="product"
          style="width: 100%"
          show-summary
          :summary-method="getSummaries"
          class="form-table"
        >
          <el-table-column type="index" label="序" width="60" align="center" />
          <el-table-column prop="product_name" label="商品名称" align="left" min-width="130" />
          <el-table-column prop="product_code" label="商品编码" align="center" />
          <el-table-column prop="unit" label="主单位" align="center" />
          <el-table-column prop="notice_num" label="通知收货数量" align="center" />
          <el-table-column prop="enter_num" label="已入库数量" align="center" />
          <el-table-column prop="review_num" label="验收审核数量" align="center">
            <!-- <template #default="{ row }">
              <div class="flex-ca">
                <template v-for="(item, i) in row.multi_unit">
                  <div v-if="item.num" :key="i"><span v-if="i">、</span>{{ item.num || 0 }}{{ item.unit }}</div>
                </template>
              </div>
            </template> -->
          </el-table-column>
          <el-table-column prop="location" label="库位" :formatter="row => row.location.map(v => v.name).toString()" align="center" />
        </el-table>
      </template>
      <PageReview v-model="showReview" title="审核验收单" :statusList="reviewList" @done="review" />
    </template>
  </ele-split-panel>
</template>

<script setup>
import PageReview from '@/components/Common/Review.vue'

const props = defineProps({
  orderId: Number,
})

const emit = defineEmits(['done'])

const { formatDate, getType } = utils

const loading = ref(false)
const showReview = ref(false)
const treeRef = ref(null)
const current = ref(null)
const treeData = ref([])
const product = ref([])

const reviewList = [
  { value: 'YR', label: '收货' },
  { value: 'CD', label: '取消' },
]

function getProduct(id) {
  product.value = []
  utils.get('/enterNotice/checkProduct', { id }).then((res) => {
    product.value = res.data
  })
}

/** 树过滤方法 */
function filterNode(value, data) {
  if (value)
    return !!(data.order_sn && data.order_sn.includes(value))

  return true
}

/** 选择数据 */
function onNodeClick(row) {
  if (row?.id) {
    current.value = row
    treeRef.value?.setCurrentKey?.(row.id)
    getProduct(row.id)
  }
  else {
    current.value = null
  }
}

/** 查询 */
function query() {
  loading.value = true
  utils.get('/enterNotice/checkList', { id: props.orderId }).then((res) => {
    treeData.value = res.data
    if (res.data.length) {
      nextTick(() => {
        const row = res.data.find(v => v.id === current.value?.id) ?? res.data[0]
        onNodeClick(row)
      })
    }
  }).finally(() => {
    loading.value = false
  })
}

query()

function review(data, cb) {
  utils.post('/enterNotice/review', {
    id: current.value.id,
    status: data.status,
    remark: data.remark,
  }).then((res) => {
    cb && cb()
    utils.message(res.msg, res.success)
    if (res.success) {
      showReview.value = false
      query()
      emit('done', true)
    }
  })
}

function getSummaries({ columns, data }) {
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const keys = ['notice_num', 'review_num', 'enter_num']
    if (keys.includes(column.property)) {
      sums[index] = data.reduce((acc, cur) => utils.Big(acc).plus(cur[column.property]).valueOf(), 0)
    }
    else {
      sums[index] = ''
    }
  })

  return sums
}
</script>

<style lang="scss" scoped>

</style>
